<html>
    <head>
        <title>Multiple Google Layers Acceptance Test</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script> 
        <script src="../../lib/OpenLayers.js"></script>
        <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="../../theme/default/google.css" type="text/css" />
        <style>
            .col {
                position: relative;
                width: 50%;
            }
            #col1 {
                float: left;
            }
            #col2 {
                float: right;
            }
            .map {
                position: relative;
                height: 300px;
            }
            .wrap {
                position: relative;
                padding: 10px;
            }
            ul {
                padding: 0;
            }
            ul li {
                list-style: none;
            }
            p.clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="col1" class="col">
            <div class="wrap">
                <div id="map1" class="map"></div>
                layers for map1
                <ul>
                    <li><input type="checkbox" checked="checked" name="streets1" id="streets1"><label for="streets1">streets</label></li>
                    <li><input type="checkbox" checked="checked" name="sat1" id="sat1"><label for="sat1">imagery</label></li>
                    <li><input type="checkbox" checked="checked" name="topo1" id="topo1"><label for="topo1">topography</label></li>
                </ul>
            </div>
        </div>
        <div id="col2" class="col">
            <div class="wrap">
                <div id="map2" class="map"></div>
                layers for map2
                <ul>
                    <li><input type="checkbox" name="streets2" id="streets2"><label for="streets2">streets</label></li>
                    <li><input type="checkbox" name="sat2" id="sat2"><label for="sat2">imagery</label></li>
                    <li><input type="checkbox" name="topo2" id="topo2"><label for="topo2">topography</label></li>
                </ul>
            </div>
        </div>
        <p class="clear">
            This example is used to confirm that resizable maps with multiple
            Google layers work properly.  Click the checkboxes to add/remove
            layers from the maps.  Use the layer switcher to change the map's
            base layer.  You should be able to confirm the following:
            <ol>
                <li>Adding and removing layers doesn't raise any errors
                (regardless of how many times the same layer is added/removed).</li>
                <li>The Google "Powered By" link is always visible and clickable
                when a Google layer is displayed.</li>
                <li>The Google "Terms of Use" link is always visible and clickable
                when a Google layer is displayed.</li>
                <li>Resizing a map (by resizing the browser window) and then
                changing base layer works well.  That is, the center & scale are
                preserved and all tiles are well aligned.</li>
                <li>Setting the base layer to the "Dummy Layer" hides all other
                Google base layers, "Powered By" link, and "Terms of Use" link.</li>
            </ol>
        </p>
        <script>
        
            var map1 = new OpenLayers.Map("map1");
            var streets1 = new OpenLayers.Layer.Google("Streets", {
                type: G_NORMAL_MAP
            });
            var sat1 = new OpenLayers.Layer.Google("Imagery", {
                type: G_SATELLITE_MAP
            });
            var topo1 = new OpenLayers.Layer.Google("Topography", {
                type: G_PHYSICAL_MAP
            });
            var dummy1 = new OpenLayers.Layer("Dummy Layer", {
                isBaseLayer: true
            });
            map1.addLayers([streets1, sat1, topo1, dummy1]);
            map1.addControl(new OpenLayers.Control.LayerSwitcher);
            map1.zoomToMaxExtent();
        
            var map2 = new OpenLayers.Map("map2");
            var streets2 = new OpenLayers.Layer.Google("Streets", {
                type: G_NORMAL_MAP
            });
            var sat2 = new OpenLayers.Layer.Google("Imagery", {
                type: G_SATELLITE_MAP
            });
            var topo2 = new OpenLayers.Layer.Google("Topography", {
                type: G_PHYSICAL_MAP
            });
            var dummy2 = new OpenLayers.Layer("Dummy Layer", {
                isBaseLayer: true
            });
            map2.addLayer(dummy2);
            map2.addControl(new OpenLayers.Control.LayerSwitcher);
            map2.zoomToMaxExtent();
            
            // add behavior to checkboxes
            var check, inputs = document.getElementsByTagName("input");
            for (var i=0, len=inputs.length; i<len; ++i) {
                check = inputs[i];
                check.onclick = function() {
                    var name = this.name;
                    var num = name.match(/\d$/)[0];
                    var layer = window[name];
                    var map = window["map" + num];
                    if (this.checked) {
                        map.addLayer(layer);
                    } else {
                        map.removeLayer(layer);
                    }
                }
            }

        </script>
    </body>
</html>